<template>
  <view class="container">
    <!-- 门店图片 -->
    <image class="store-image" :src="store.image_url" mode="aspectFill"></image>

    <!-- 门店信息 -->
    <view class="store-info">
      <view class="store-name">{{ store.name }}</view>
      <view class="store-address">
        <text class="label">地址：</text>
        <text>{{ store.address }}</text>
      </view>
      <view class="store-phone">
        <text class="label">电话：</text>
        <text>{{ store.phone }}</text>
      </view>
      <view class="store-hours">
        <text class="label">营业时间：</text>
        <text>{{ store.business_hours }}</text>
      </view>
      <view class="store-description">
        <text class="label">门店介绍：</text>
        <text>{{ store.description }}</text>
      </view>
    </view>

    <!-- 地图显示 -->
    <view class="map-container">
      <map
        class="map"
        :latitude="store.latitude"
        :longitude="store.longitude"
        :markers="markers"
        scale="16"
        show-location
      ></map>
    </view>

    <!-- Tab页 -->
    <view class="tabs">
      <view
        class="tab-item"
        :class="{ active: currentTab === 'doctors' }"
        @click="currentTab = 'doctors'"
      >
        医生列表
      </view>
      <view
        class="tab-item"
        :class="{ active: currentTab === 'reviews' }"
        @click="currentTab = 'reviews'"
      >
        门店评价
      </view>
    </view>

    <!-- 医生列表 -->
    <view class="tab-content" v-if="currentTab === 'doctors'">
      <view
        class="doctor-item"
        v-for="(doctor, index) in doctors"
        :key="index"
        @click="handleDoctorClick(doctor)"
      >
        <image
          class="doctor-avatar"
          :src="doctor.avatar"
          mode="aspectFill"
        ></image>
        <view class="doctor-info">
          <view class="doctor-name">{{ doctor.name }}2 </view>
          <view class="doctor-title">{{ doctor.title }}</view>
          <view class="doctor-specialty">{{ doctor.specialty }}</view>
        </view>
      </view>
    </view>

    <!-- 门店评价 -->
    <view class="tab-content" v-if="currentTab === 'reviews'">
      <view class="review-item" v-for="(review, index) in reviews" :key="index">
        <view class="review-header">
          <image
            class="user-avatar"
            :src="review.user_avatar"
            mode="aspectFill"
          ></image>
          <view class="user-info">
            <view class="user-name">{{ review.user_name }}</view>
            <view class="review-time">{{ review.create_time }}</view>
          </view>
          <view class="review-rating">
            <text class="rating-text">{{ review.rating }}分</text>
            <view class="rating-stars">
              <text
                class="iconfont"
                :class="star <= review.rating ? 'icon-star-fill' : 'icon-star'"
                v-for="star in 5"
                :key="star"
              ></text>
            </view>
          </view>
        </view>
        <view class="review-content">{{ review.content }}</view>
      </view>
    </view>

    <!-- 底部按钮 -->
    <view class="footer">
      <button class="btn" @click="handleNavigation">导航到这里</button>
      <button class="btn primary" @click="handleAppointment">预约服务</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      store: null,
      markers: [],
      currentTab: "doctors",
      doctors: [
        {
          id: 1,
          name: "张医生",
          title: "主任医师",
          specialty: "擅长中医内科、针灸推拿",
          avatar: "/static/doctors/doctor1.jpg",
        },
        {
          id: 2,
          name: "李医生",
          title: "副主任医师",
          specialty: "擅长中医妇科、儿科",
          avatar: "/static/doctors/doctor2.jpg",
        },
        {
          id: 3,
          name: "王医生",
          title: "主治医师",
          specialty: "擅长中医骨科、康复",
          avatar: "/static/doctors/doctor3.jpg",
        },
      ],
      reviews: [
        {
          id: 1,
          user_name: "张三",
          user_avatar: "/static/avatars/user1.jpg",
          rating: 5,
          content: "医生很专业，服务态度很好，治疗效果明显。",
          create_time: "2024-03-15",
        },
        {
          id: 2,
          user_name: "李四",
          user_avatar: "/static/avatars/user2.jpg",
          rating: 4,
          content: "环境不错，医生很耐心，就是人有点多。",
          create_time: "2024-03-14",
        },
        {
          id: 3,
          user_name: "王五",
          user_avatar: "/static/avatars/user3.jpg",
          rating: 5,
          content: "治疗效果很好，医生很专业，推荐！",
          create_time: "2024-03-13",
        },
      ],
    };
  },
  onLoad(options) {
    if (options.id) {
      this.getStoreDetail(options.id);
    }
  },
  methods: {
    // 获取门店详情
    getStoreDetail(id) {
      // 使用静态数据
      const stores = [
        {
          id: 1,
          name: "总店",
          address: "北京市朝阳区建国路88号",
          phone: "010-88888888",
          business_hours: "09:00-21:00",
          description:
            "中医馆总店，提供全面的中医诊疗服务。我们拥有经验丰富的中医专家团队，提供针灸、推拿、中药调理等多项服务。环境优雅，设备齐全，是您健康调理的理想选择。",
          image_url: "/static/stores/store1.jpg",
          latitude: 39.9042,
          longitude: 116.4074,
        },
        {
          id: 2,
          name: "东城分店",
          address: "北京市东城区王府井大街1号",
          phone: "010-66666666",
          business_hours: "09:00-21:00",
          description:
            "东城区分店，交通便利，环境优雅。我们专注于传统中医诊疗，提供个性化的健康调理方案。店内设有独立诊室，保证就诊私密性。",
          image_url: "/static/stores/store2.jpg",
          latitude: 39.915,
          longitude: 116.4037,
        },
        {
          id: 3,
          name: "西城分店",
          address: "北京市西城区西单北大街1号",
          phone: "010-77777777",
          business_hours: "09:00-21:00",
          description:
            '西城区分店，专业团队，服务周到。我们秉承"以人为本"的理念，提供专业的中医诊疗服务。店内环境舒适，让您在轻松的氛围中调理身心。',
          image_url: "/static/stores/store3.jpg",
          latitude: 39.9139,
          longitude: 116.3917,
        },
      ];

      const store = stores.find((s) => s.id === Number(id));
      if (store) {
        this.store = store;
        this.markers = [
          {
            id: 1,
            latitude: store.latitude,
            longitude: store.longitude,
            title: store.name,
            iconPath: "/static/icons/location.png",
            width: 30,
            height: 30,
          },
        ];
      } else {
        uni.showToast({
          title: "门店不存在",
          icon: "none",
        });
        setTimeout(() => {
          uni.navigateBack();
        }, 1500);
      }
    },

    // 导航到门店
    handleNavigation() {
      if (!this.store) return;

      uni.openLocation({
        latitude: Number(this.store.latitude),
        longitude: Number(this.store.longitude),
        name: this.store.name,
        address: this.store.address,
        scale: 18,
      });
    },

    // 预约服务
    handleAppointment() {
      if (!this.store) return;

      uni.navigateTo({
        url: `/pages/appointment/appointment?store_id=${this.store.id}`,
      });
    },

    // 处理医生点击
    handleDoctorClick(doctor) {
      console.log(22222, doctor);
      uni.navigateTo({
        url: `/pages/doctor/detail?id=${doctor.id}`,
      });
      console.log(33333, doctor);
    },
  },
};
</script>

<style>
.container {
  padding-bottom: 120rpx;
}

.store-image {
  width: 100%;
  height: 400rpx;
}

.store-info {
  padding: 30rpx;
  background: #fff;
}

.store-name {
  font-size: 36rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
}

.store-address,
.store-phone,
.store-hours,
.store-description {
  font-size: 28rpx;
  margin-bottom: 20rpx;
  line-height: 1.5;
}

.label {
  color: #666;
  margin-right: 10rpx;
}

.map-container {
  margin: 20rpx;
  height: 400rpx;
  border-radius: 10rpx;
  overflow: hidden;
}

.map {
  width: 100%;
  height: 100%;
}

.tabs {
  display: flex;
  background: #fff;
  margin: 20rpx;
  border-radius: 10rpx;
  overflow: hidden;
}

.tab-item {
  flex: 1;
  text-align: center;
  padding: 20rpx 0;
  font-size: 28rpx;
  color: #666;
  position: relative;
}

.tab-item.active {
  color: #007aff;
  font-weight: bold;
}

.tab-item.active::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 40rpx;
  height: 4rpx;
  background: #007aff;
  border-radius: 2rpx;
}

.tab-content {
  padding: 20rpx;
}

.doctor-item {
  display: flex;
  padding: 20rpx;
  background: #fff;
  border-radius: 10rpx;
  margin-bottom: 20rpx;
}

.doctor-avatar {
  width: 120rpx;
  height: 120rpx;
  border-radius: 60rpx;
  margin-right: 20rpx;
}

.doctor-info {
  flex: 1;
}

.doctor-name {
  font-size: 28rpx;
  font-weight: bold;
  margin-bottom: 10rpx;
}

.doctor-title {
  font-size: 24rpx;
  color: #007aff;
  margin-bottom: 10rpx;
}

.doctor-specialty {
  font-size: 24rpx;
  color: #666;
}

.review-item {
  background: #fff;
  padding: 20rpx;
  border-radius: 10rpx;
  margin-bottom: 20rpx;
}

.review-header {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
}

.user-avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 40rpx;
  margin-right: 20rpx;
}

.user-info {
  flex: 1;
}

.user-name {
  font-size: 28rpx;
  font-weight: bold;
  margin-bottom: 5rpx;
}

.review-time {
  font-size: 24rpx;
  color: #999;
}

.review-rating {
  display: flex;
  align-items: center;
}

.rating-text {
  font-size: 24rpx;
  color: #ff9500;
  margin-right: 10rpx;
}

.rating-stars {
  display: flex;
}

.rating-stars .iconfont {
  font-size: 24rpx;
  color: #ff9500;
  margin-right: 5rpx;
}

.review-content {
  font-size: 28rpx;
  color: #333;
  line-height: 1.5;
}

.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20rpx;
  background: #fff;
  display: flex;
  justify-content: space-between;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1);
}

.btn {
  flex: 1;
  margin: 0 10rpx;
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  border-radius: 40rpx;
  font-size: 28rpx;
  background: #f5f5f5;
  color: #333;
}

.btn.primary {
  background: #007aff;
  color: #fff;
}
</style> 